<template>

  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :modal-append-to-body="false">
    <el-form :rules="rules" ref="dataForm" :model="tpgoods" label-position="right" label-width="20%"
             style='width: 90%; margin-left:1%;'>
      <el-form-item label="父级" prop="parentId">
        <span style="color: lightseagreen;">{{tpgoods.show}}</span>
      </el-form-item>

<!--      <el-form-item label="申请全编码" prop="">
        <span>{{applyshow}}</span>
      </el-form-item>-->
      <el-form-item label="备件编码" prop="fullCodeNo">
        <el-input v-model="tpgoods.fullCodeNo"></el-input>
      </el-form-item>
      <el-form-item label="备件名称" prop="commodityName">
        <el-input v-model="tpgoods.commodityName"></el-input>
      </el-form-item>
      <el-form-item label="型号规格" prop="specification">
        <el-input v-model="tpgoods.specification"></el-input>
      </el-form-item>
      <el-form-item label="备件属性">
        <el-select v-model="tpgoods.poper" placeholder="请选择">
          <el-option
            v-for="item in selects.poper"
            :key="item.val"
            :label="item.name"
            :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="采购方式">
        <el-select v-model="tpgoods.cgfs" placeholder="请选择">
          <el-option
            v-for="item in selects.cgfs"
            :key="item.val"
            :label="item.name"
            :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备件类型">
        <el-select v-model="tpgoods.bjlx" placeholder="请选择">
          <el-option
            v-for="item in selects.bjlx"
            :key="item.val"
            :label="item.name"
            :value="item.val">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计量单位" prop="unitText">
        <el-input v-model="tpgoods.unitText"></el-input>
      </el-form-item>
      <el-form-item label="备件图片" prop="unitText">
        <el-upload
          action="https://jsonplaceholder.typicode.com/posts/"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </el-form-item>
      <el-form-item label="备注" prop="describeText">
        <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 3}" placeholder="请输入描述"
                  v-model="tpgoods.describeText"></el-input>
      </el-form-item>

     <!-- <el-form-item v-for="(attr, i) in tpgoods.commodityAttrs"
                    :label="'商品属性' + i" :key="attr.key" :prop="'commodityAttrs.' + i + '.attrName'">
        <el-col :span="10">
          <el-input v-model="attr.attrName" placeholder="属性名"></el-input>
        </el-col>
        <el-col :span="10">
          <el-input v-model="attr.attrVal" placeholder="属性值"></el-input>
        </el-col>
        <el-col :span="4">
          &nbsp;&nbsp;<el-button @click.prevent="removeCommodityAttrs(attr)" size="mini" type="danger"><i
          class="el-icon-delete"></i></el-button>
        </el-col>
      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="addAttr" type="warning">停用</el-button>
      <el-button v-if="dialogStatus=='create2'" type="primary" @click="createGoodSubmit" id="cfmbtm3">确 定
      </el-button>
      <el-button v-else type="primary" @click="updateGoodSubmit" id="cfmbtm4">确 定</el-button>
      <el-button type="danger" @click="stopBack" id="cfmbtm5">退回</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import { createOne, deleteOne, deletePost, getOne, rolesAll, updateOneNoId} from '@/api/common'
  import {disableBtn, df, $err, $suc, ERRS, SUCS} from '@/utils'

  export default {
    name: 'formComp',
    props: {
      levStatus: Number,
      tData:Object,
      textMap:Object,
    },

    computed: {
      applyshow: function() {
        // return this.tData.fullCodeNo+this.temp.codeNo +this.temp.explainText
      }
    },
    mounted() {
    },
    data:function () {
      return {
          //上传
        dialogImageUrl: '',
        dialogVisible: false,

        dialogFormVisible:false,
        dialogStatus:'',
        tpgoods:{},
        selects:{
          poper:[
            {name: '采购物资', val: '0'},
            {name: '随机物资', val: '1'},
          ],
          cgfs:[
            {name: '零采', val: '0'},
            {name: '统购', val: '1'},
            {name: '委托采购', val: '2'},
            {name: '寄售', val: '3'},
          ],
          bjlx:[
            {name: '一般备件', val: '0'},
            {name: '故障备件', val: '1'},
          ],
        },
        partCode:[
          {code:1,name:'采购物资'},
          {code:2,name:'随机物资'},
        ],
        purchase:[],
        rules: {
          commodityName: [
            {required: true, message: '请输入商品名', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ],
          specification: [
            {required: true, message: '请输入型号规格', trigger: 'blur'},
            {min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur'}
          ]
        }
      }
    },
    methods: {
      //上传
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //退回
      stopBack(){},

      // + - 属性项
      removeCommodityAttrs(item) {
        var index = this.tpgoods.commodityAttrs.indexOf(item)
        if (index !== -1) {
          this.tpgoods.commodityAttrs.splice(index, 1)
        }
      },
      addAttr() {
        this.tpgoods.commodityAttrs.push({attrName: '', attrVal: ''});
      },

      auditCode(it) {
        this.tpgoods = {
          codeExplainParentId: it.id,
          // commodityAttrs:[{attrName: '', attrVal: '', id: ''}],
          commodityAttrs: [{attrName: '', attrVal: ''}],
          commodityName: '',
          describeText: '',
          specification: '',
          unitText: '',
          show: `${it.level}级 ${it.fullname} (${it.fullCodeNo})`
        };
        this.dialogStatus = 'create2'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
      },

      createGoodSubmit() {
        delete this.tpgoods.show
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            disableBtn('cfmbtm3');
            createOne('commodities', this.tpgoods).then(res => {

              this.dialogFormVisible = false
              if (res.data.code === 0) {
                $suc('添加成功!')
                this.$parent.getList();
              } else {
                ERRS(res.data.message)
              }
            })
          }
        })
      },
      updateGoods(it) {
        console.log(it);
        const da=it
        this.tpgoods = {
          id: da.id,
          // commodityAttrs:[{attrName: '', attrVal: '', id: ''}],
          // commodityName: it.explainText,
          // commodityAttrs: da.attrList,
          commodityAttrs: [{attrName: '', attrVal: ''}],
          commodityName: it.explainText,
          fullCodeNo: it.fullCodeNo,
          describeText: it.describeText,
          specification: it.specification,
          unitText: it.unitText,
          show: `${it.level}级 ${it.fullname} (${it.fullCodeNo})`,
          poper:'0',
          cgfs:'0',
          bjlx:'0',
        };

        if (it.parentCodeExplain) //有子级加
          this.tpgoods.codeExplainParentId = it.parentCodeExplain.id
        this.dialogStatus = 'update2'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
        })
/*
        getOne(`commodities/codeExplains`, {id: it.id}).then(res => {
          let dat = res.data;
          // console.log(res)
          if (dat.code == 0) {
            let da = dat.data
            this.tpgoods = {
              id: da.id,
              // commodityAttrs:[{attrName: '', attrVal: '', id: ''}],
              // commodityName: it.explainText,
              commodityAttrs: da.attrList,
              commodityName: da.commodityName,
              describeText: da.describeText,
              specification: da.specification,
              unitText: da.unitText,
              show: `${it.level}级 ${it.fullname} (${it.fullCodeNo})`
            };
            if (it.parentCodeExplain) //有子级加
              this.tpgoods.codeExplainParentId = it.parentCodeExplain.id
            this.dialogStatus = 'update2'
            this.dialogFormVisible = true
            this.$nextTick(() => {
              this.$refs['dataForm'].clearValidate()
            })
          } else {
            ERRS(response.statusText)
          }

        })
*/

      },
      updateGoodSubmit() {
        delete this.tpgoods.show
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            disableBtn('cfmbtm4');
            updateOneNoId('commodities', this.tpgoods).then(res => {
              this.dialogFormVisible = false
              if (res.data.code === 0) {
                $suc('修改成功!')
                this.$parent.getList();
              } else {
                ERRS(res.data.message)
              }
            })
          }
        })
      },

    }
  }
</script>

